// element 组件全局样式
:root.qiao_yi {
  --el-component-size: #{getCssVar(height-control, default)};
  --el-text-color-placeholder: #{getCssVar(color, text, 0)}; // 顶部标签页关闭按钮颜色
  --el-fill-color-blank: #{getCssVar(color, white)}; // 全局编辑器背景色
  --el-border-radius-base: #{getCssVar(border, radius, extra, small)}; // 全局编辑器圆角
  --el-border-color: #{getCssVar(color, border, 2)}; // 全局编辑器边框
  --el-border-color-hover: #{getCssVar(color, border, 2)};
  --el-disabled-border-color: #{getCssVar(color, disabled, border)};
  --el-border-color-light: #{getCssVar(color, border)}; // 分页组件下边框样式
  --el-fill-color-light: #{getCssVar(color, fill, 0)}; // 下拉悬浮颜色

  // 提示
  .el-alert {
    --el-alert-padding: 3px 8px;

    .el-alert__close-btn {
      top: 5px;
      right: 7px;
    }
  }

  // 全局按钮样式
  .el-button {
    --el-button-bg-color: #{getCssVar(color, white)};
    --el-button-text-color: #{getCssVar(color, text, 0)};
    --el-button-border-color: #{getCssVar(color, text, 0)};
    --el-button-hover-text-color: #{getCssVar(color, primary)};
    --el-button-hover-bg-color: #{getCssVar(color, primary, hover)};
    --el-button-hover-border-color: #{getCssVar(color, border, hover)};
    --el-button-active-text-color: #{getCssVar(color, primary)};
    --el-button-active-bg-color: #{getCssVar(color, primary, hover)};
    --el-button-active-border-color: #{getCssVar(color, primary)};
    --el-button-disabled-text-color: #{getCssVar(color, text, 0)};
    --el-button-disabled-bg-color: #{getCssVar(color, white)};
    --el-button-disabled-border-color: #{getCssVar(color, border)};

    height: getCssVar(height-control, default);
    font-size: getCssVar(font-size, regular);
    border-width: 1px;

    // 圆形按钮
    &.is-circle {
      width: getCssVar(height-control, default);
    }

    // 非圆形按钮
    &:not(.is-circle) {
      padding: 5px 11px;
      border-radius: getCssVar(border, radius, extra, small);
    }

    // 主要按钮
    &.el-button--primary {
      --el-button-text-color: #{getCssVar(color, white)};
      --el-button-bg-color: #{getCssVar(color, primary)};
      --el-button-border-color: #{getCssVar(color, primary)};
      --el-button-hover-text-color: #{getCssVar(color, white)};
      --el-button-hover-bg-color: #{getCssVar(color, primary, active)};
      --el-button-hover-border-color: #{getCssVar(color, primary, active)};
      --el-button-active-text-color: #{getCssVar(color, white)};
      --el-button-active-bg-color: #{getCssVar(color, primary)};
      --el-button-active-border-color: #{getCssVar(color, primary)};
      --el-button-disabled-text-color: #{getCssVar(color, white)};
      --el-button-disabled-bg-color: #{getCssVar(color, primary, disabled)};
      --el-button-disabled-border-color: #{getCssVar(color, primary, disabled)};
    }

    // 信息按钮
    &.el-button--info {
      --el-button-text-color: #{getCssVar(color, white)};
      --el-button-bg-color: #{getCssVar(color, info)};
      --el-button-border-color: #{getCssVar(color, info)};
      --el-button-hover-text-color: #{getCssVar(color, white)};
      --el-button-hover-bg-color: #{getCssVar(color, info, hover)};
      --el-button-hover-border-color: #{getCssVar(color, info, hover)};
      --el-button-active-text-color: #{getCssVar(color, white)};
      --el-button-active-bg-color: #{getCssVar(color, info, active)};
      --el-button-active-border-color: #{getCssVar(color, info, active)};
      --el-button-disabled-text-color: #{getCssVar(color, white)};
      --el-button-disabled-bg-color: #{getCssVar(color, info, disabled)};
      --el-button-disabled-border-color: #{getCssVar(color, info, disabled)};
    }

    // 成功按钮
    &.el-button--success {
      --el-button-text-color: #{getCssVar(color, white)};
      --el-button-bg-color: #{getCssVar(color, success)};
      --el-button-border-color: #{getCssVar(color, success)};
      --el-button-hover-text-color: #{getCssVar(color, white)};
      --el-button-hover-bg-color: #{getCssVar(color, success, hover)};
      --el-button-hover-border-color: #{getCssVar(color, success, hover)};
      --el-button-active-text-color: #{getCssVar(color, white)};
      --el-button-active-bg-color: #{getCssVar(color, success, active)};
      --el-button-active-border-color: #{getCssVar(color, success, active)};
      --el-button-disabled-text-color: #{getCssVar(color, white)};
      --el-button-disabled-bg-color: #{getCssVar(color, success, disabled)};
      --el-button-disabled-border-color: #{getCssVar(color, success, disabled)};
    }

    // 警告按钮
    &.el-button--warning {
      --el-button-text-color: #{getCssVar(color, white)};
      --el-button-bg-color: #{getCssVar(color, warning)};
      --el-button-border-color: #{getCssVar(color, warning)};
      --el-button-hover-text-color: #{getCssVar(color, white)};
      --el-button-hover-bg-color: #{getCssVar(color, warning, hover)};
      --el-button-hover-border-color: #{getCssVar(color, warning, hover)};
      --el-button-active-text-color: #{getCssVar(color, white)};
      --el-button-active-bg-color: #{getCssVar(color, warning, active)};
      --el-button-active-border-color: #{getCssVar(color, warning, active)};
      --el-button-disabled-text-color: #{getCssVar(color, white)};
      --el-button-disabled-bg-color: #{getCssVar(color, warning, disabled)};
      --el-button-disabled-border-color: #{getCssVar(color, warning, disabled)};
    }

    // 危险按钮
    &.el-button--danger {
      --el-button-text-color: #{getCssVar(color, white)};
      --el-button-bg-color: #{getCssVar(color, danger)};
      --el-button-border-color: #{getCssVar(color, danger)};
      --el-button-hover-text-color: #{getCssVar(color, white)};
      --el-button-hover-bg-color: #{getCssVar(color, danger, hover)};
      --el-button-hover-border-color: #{getCssVar(color, danger, hover)};
      --el-button-active-text-color: #{getCssVar(color, white)};
      --el-button-active-bg-color: #{getCssVar(color, danger, active)};
      --el-button-active-border-color: #{getCssVar(color, danger, active)};
      --el-button-disabled-text-color: #{getCssVar(color, white)};
      --el-button-disabled-bg-color: #{getCssVar(color, danger, disabled)};
      --el-button-disabled-border-color: #{getCssVar(color, danger, disabled)};
    }

    // // 反转按钮
    &.el-button--inverse {
      --el-button-disabled-bg-color: #{getCssVar(color, fill, 0)};

      border-width: 0;
    }
  }

  // 分页样式
  .el-tabs {
    .el-tabs__header.is-top .el-tabs__item.is-top {
      font-size: getCssVar('font-size', 'header-6');
    }

    .el-tabs__header {
      margin-bottom: 0 0 8px;
    }

    .el-tabs__nav-wrap::after {
      background-color: getCssVar(color, border);
    }
  }

  // 下拉框样式
  .el-select-v2__wrapper,
  .el-select-v2__wrapper .el-select-v2__input-wrapper {
    line-height: getCssVar('height-control-default');
  }

  .el-select-v2 {
    display: block;
    font-size: getCssVar('font-size', 'regular');
  }

  .el-select__input,
  .el-tag {
    height: getCssVar('height-control', 'small');
    font-size: getCssVar('font-size', 'small');
  }

  .el-select .el-tag {
    margin-top: -2px;
  }

  // 自动补全输入框
  .el-autocomplete {
    display: block;
  }

  // 时间范围选择
  .el-date-editor .el-range-separator {
    font-size: getCssVar(font-size, regular);
  }

  // 输入框样式
  .el-input__wrapper {
    transform: none;
  }

  // 所有编辑器样式禁用背景色
  // 输入框
  .el-input.is-disabled .el-input__wrapper {
    background-color: getCssVar(color, disabled, fill);
    border-radius: getCssVar(border, radius, extra, small);
    box-shadow: 0 0 0 1px getCssVar(color, border, 2) inset;
  }

  // 数值框
  .el-input-number .el-input__wrapper {
    box-shadow: 0 0 0 1px getCssVar(color, border, 2) inset;
  }

  // 下拉选择器
  .el-select-v2__wrapper.is-disabled {
    color: getCssVar(color, text, 0);
    background-color: getCssVar(color, disabled, fill);
    border-color: getCssVar(color, border, 2)
  }

  // 数据选择移入样式
  .el-autocomplete-suggestion {
    --el-fill-color-light: #{getCssVar(color, fill, 0)};
  }

  // 多选框样式
  .el-checkbox .el-checkbox__inner {
    width: 12px;
    height: 12px;

    &::after {
      width: 2px;
      height: 6px;
    }
  }

  // 菜单
  .el-menu-item,
  .el-sub-menu__title {
    font-size: getCssVar('font-size', 'header-6');
  }

  // 下拉弹框样式统一调整
  .el-popper {
    --el-font-size-base: #{getCssVar('font-size', 'header-6')};

    .el-button {
      font-size: #{getCssVar('font-size', 'header-6')};
    }
  }

  .el-popper__arrow {
    display: block;
  }

  .el-popper.is-light {
    background-color: getCssVar(color, bg, 3);
  }

  .el-select-dropdown__item,
  .el-select-dropdown__option-item {
    font-size: getCssVar('font-size', 'header-6');

    &.hover {
      background-color: getCssVar(color, bg, 2) !important;
    }
  }

  .el-select-dropdown__item.selected {
    font-weight: getCssVar('font-weight', 'bold');
    color: getCssVar(color, primary);
  }

  .el-popper.el-dropdown__popper {
    .el-dropdown-menu {
      background-color: transparent;
    }

    .el-scrollbar .el-dropdown__list {
      background-color: transparent;

      .el-dropdown-menu__item {
        min-height: 32px;
        padding: getCssVar('spacing', 'extra-tight') getCssVar('spacing', 'base');
        color: getCssVar(color, text, 0);
        background-color: transparent;

        &:hover:not(.is-disabled) {
          color: getCssVar(color, primary);
          background-color: getCssVar(color, primary, hover);
        }

        &:hover:has(.is-disabled) {
          color: currentcolor;
          background-color: transparent;
        }
      }
    }
  }

  .el-autocomplete-suggestion li:hover {
    background-color: getCssVar(color, bg, 2);
  }
}